<template>
  <view class="return">
    <view class="return-form">
      <u-form
        label-width="200"
        :label-style="{ margin: '0' }"
        :model="form"
        :rules="rules"
        ref="uForm"
      >
        <!-- <view class="part bg">
          <u-form-item label="快递公司" :label-style="{ 'font-size': '30rpx' }">
            <u-input height="90" placeholder="请输入快递公司名称" />
          </u-form-item>
          <u-form-item label="快递单号">
            <u-input height="90" placeholder="请输入快递单号" />
          </u-form-item>
        </view> -->
        <!-- <view class="bg money">
          <u-form-item
            label="退款金额"
            label-position="top"
            :label-style="{ 'font-size': '26rpx', 'line-height': '60rpx' }"
            :border-bottom="false"
          >
            <u-input />
          </u-form-item>
        </view> -->
        <!-- <u-form-item
          label="快递公司"
          label-position="top"
          :label-style="{ 'font-size': '26rpx', 'line-height': '60rpx' }"
          :border-bottom="false"
        >
          <u-input />
        </u-form-item>
        <u-form-item
          label="快递单号"
          label-position="top"
          :label-style="{ 'font-size': '26rpx', 'line-height': '60rpx' }"
          :border-bottom="false"
        >
          <u-input />
        </u-form-item> -->
        <view class="bg apply">
          <u-form-item
            :border-bottom="false"
            label="申请说明"
            label-position="top"
            :label-style="{ 'font-size': '26rpx' }"
            prop="explain"
          >
            <u-input
              type="textarea"
              placeholder="请您详细填写申请说明"
              v-model="form.explain"
            />
          </u-form-item>
          <u-form-item :border-bottom="false">
            <u-upload
              width="125"
              height="125"
              ref="uUpload"
              action="http://shop.outletds.com/api/common/upload"
              :auto-upload="true"
              :show-progress="false"
              max-count="9"
            />
          </u-form-item>
        </view>
        <view class="bg tel">
          <u-form-item label="联系人" prop="name">
            <u-input height="90" v-model="form.name" />
          </u-form-item>
          <u-form-item label="联系电话" :border-bottom="false" prop="phone">
            <u-input height="90" v-model="form.phone" />
          </u-form-item>
        </view>
      </u-form>
    </view>

    <view class="return-oper" @click="submit"> 提交申请</view>
  </view>
</template>

<script>
import { stateUpdate } from "@/utils/api";
import uInput from "uview-ui/components/u-input/u-input.vue";
export default {
  components: { uInput },
  data() {
    return {
      action: "",
      orderId: "",
      types: [
        {
          label: "我要退款(无需退货)",
        },
        {
          label: "我要退货退款",
        },
      ],
      typeShow: false,

      form: {
        phone: "",
        name: "",
        explain: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请填写姓名",
            trigger: ["change", "blur"],
          },
        ],
        phone: [
          {
            required: true,
            message: "请填写联系方式",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        explain: [
          {
            required: true,
            message: "请填写说明",
            trigger: ["change", "blur"],
          },
        ],
      },
      fileList: [],
    };
  },
  onLoad({ id }) {
    this.orderId = id;
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      this.$refs.uForm.validate((valid) => {
        console.log("valid===", valid);
        let files = this.$refs.uUpload.lists.filter((val) => {
          return val.progress == 100;
        });
        console.log(files);
        let images = [];
        files.map((item) => {
          images.push(item.response.code.url);
        });
        const { name, phone, explain } = this.form;
        if (valid) {
          stateUpdate({
            id: this.orderId,
            phone,
            name,
            images: images.join(","),
            explain,
            status: 3,
          }).then((resp) => {
            console.log("申请换货", resp);
            if (resp.code == 200) {
              uni.showToast({
                icon: "none",
                title: "申请成功",
                success: () => {
                  setTimeout(() => {
                    uni.redirectTo({
                      url: "/pages/orders/orders?status=" + 4,
                    });
                  });
                },
              });
            }
          });
        }
      });
    },

    typeConfirm() {},
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
.return {
  &-form {
    .bg {
      background-color: #ffffff;
      @include wrapper;
    }
    .money {
      border-top: 10rpx solid #f7f7f7;
      border-bottom: 10rpx solid #f7f7f7;
    }
    .tel {
      border-top: 10rpx solid #f7f7f7;
    }
    .apply {
      padding-bottom: 35rpx;
    }
  }
  &-oper {
    width: 690rpx;
    line-height: 80rpx;
    text-align: center;
    background: #cd8544;
    color: #ffffff;
    font-size: 30rpx;
    position: fixed;
    bottom: 45rpx;
    left: 30rpx;
  }
}
</style>
